<script lang="ts" setup>
import type { Column, TableRequest } from '@king-one/antdv'
import { getAppList, getAuthAppList } from '@/apis/app-auth'
import useValueEnum from '@/hooks/useValueEnum'
import { KProTable, useProTable } from '@king-one/antdv'
import { Button } from 'ant-design-vue'
import modal from 'ant-design-vue/es/modal'
import dayjs from 'dayjs'
import AuthAppDetails from './components/AuthAppDetails'
import { authorizedIdentity_dict, progress_dict } from './dict'

const authorizedIdentityValueEnum = useValueEnum(authorizedIdentity_dict)
const progressValueEnum = useValueEnum(progress_dict)

const { proTableRef, onRefresh } = useProTable()

const columns = ref<Column[]>([
  {
    title: '应用名称',
    dataIndex: 'applicationId',
    hideInTable: true,
    valueType: 'select',
    request: async () => {
      const res = await getAppList()
      return res.data.options
    },
  },
  {
    title: '证件号码',
    dataIndex: 'idCard',
    hideInTable: true,
  },
  {
    title: '应用名称',
    dataIndex: 'applicationName',
    align: 'center',
    ellipsis: true,
    hideInForm: true,
    width: 200,
  },
  {
    title: '授权人姓名',
    dataIndex: 'realName',
    align: 'center',
    ellipsis: true,
    hideInForm: false,
    width: 150,
  },
  {
    title: '授权人手机号',
    dataIndex: 'phoneNumber',
    align: 'center',
    ellipsis: true,
    hideInForm: false,
    width: 150,
  },
  {
    title: '授权类型',
    dataIndex: 'authorizedIdentity',
    key: 'authorizedIdentity',
    align: 'center',
    ellipsis: true,
    hideInForm: true,
    width: 100,
    valueEnum: authorizedIdentityValueEnum,
    customRender: ({ text }) => {
      return h('div', null, authorizedIdentity_dict.find(item => item.value === text)?.label)
    },
  },
  {
    title: '授权企业',
    dataIndex: 'companyName',
    align: 'center',
    key: 'companyName',
    hideInForm: false,
    width: 120,
  },
  {
    title: '企业社会信用代码',
    dataIndex: 'creditCode',
    hideInTable: true,
  },
  {
    title: '授权进度',
    dataIndex: 'progress',
    align: 'center',
    ellipsis: true,
    width: 150,
    hideInForm: false,
    valueEnum: progressValueEnum,
    customRender: ({ text }) => {
      return h('div', null, progress_dict.find(item => item.value === text)?.label)
    },
  },
  {
    title: '授权时间',
    dataIndex: 'createTime',
    align: 'center',
    width: 200,
    ellipsis: true,
    hideInForm: true,
  },
  {
    title: '授权完成时间',
    dataIndex: 'endTime',
    valueType: 'dateRange',
    hideInTable: true,
  },
  {
    title: '操作',
    dataIndex: 'actions',
    align: 'center',
    hideInForm: true,
    width: 200,
  },
])

const authAppDetailsRef = ref()

const request: TableRequest = async (params) => {
  try {
    let endTime = params.endTime
    if (endTime && endTime.length > 0) {
      endTime = [dayjs(params.endTime[0]).toDate().getTime(), dayjs(params.endTime[1]).toDate().getTime()]
    }
    const res = await getAuthAppList({ ...params, endTime, companyId: params.companyName })
    return {
      data: res.data.list,
      success: true,
      total: res.data.total,
    }
  }
  catch (error) {
    return {
      data: [],
      success: false,
      total: 0,
    }
  }
}

function onUnLock() {
  modal.confirm({
    title: '提示',
    content: '是否要解锁授权关系？',
    async onOk() {
      try {
        await new Promise<void>((resolve) => {
          setTimeout(() => {
            resolve()
          }, 1500)
        })
        onRefresh()
      }
      catch {
        return console.log('Oops errors!')
      }
    },
  })
}
function onLock() {
  modal.confirm({
    title: '提示',
    content: '是否要解锁授权关系？',
    async onOk() {
      try {
        await new Promise<void>((resolve) => {
          setTimeout(() => {
            resolve()
          }, 1500)
        })
        onRefresh()
      }
      catch {
        return console.log('Oops errors!')
      }
    },
  })
}
</script>

<template>
  <div class="w-full h-full  rounded-8px p-10px">
    <KProTable
      ref="proTableRef"
      :columns="columns"
      :antd-table-props="{
        bordered: true,
      }"
      :request="request"
      :page-size="10"
    >
      <template #bodyCell="{ record, column }">
        <template v-if="column.dataIndex === 'actions'">
          <a-space class="flex justify-center">
            <Button
              type="primary"
              ghost
              size="small"
              :disabled="!record.nonLock"
              @click="onLock"
            >
              锁定
            </Button>
            <Button
              type="primary"
              ghost
              size="small"
              :disabled="record.nonLock"
              @click="onUnLock"
            >
              解锁
            </Button>
            <Button
              type="primary"
              size="small"
              ghost @click="() => authAppDetailsRef.open(record)"
            >
              详情
            </Button>
          </a-space>
        </template>
      </template>
    </KProTable>
    <AuthAppDetails ref="authAppDetailsRef" />
  </div>
</template>
